<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="6" v-for="card in cards" :key="card.title">
        <div class="data-card" :class="card.type">
          <div class="card-icon">
            <el-icon><component :is="card.icon" /></el-icon>
          </div>
          <div class="card-info">
            <div class="card-title">{{ card.title }}</div>
            <div class="card-value">{{ card.value }}</div>
            <div class="card-trend">
              <span :class="{ 'up': card.trend > 0, 'down': card.trend < 0 }">
                {{ Math.abs(card.trend) }}%
                <el-icon><component :is="card.trend > 0 ? 'ArrowUp' : 'ArrowDown'" /></el-icon>
              </span>
              较上周
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>访问趋势</span>
              <el-radio-group v-model="timeRange" size="small" @change="handleTimeRangeChange">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">全年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <v-chart class="chart" :option="lineChartOption" autoresize />
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>用户分布</span>
            </div>
          </template>
          <v-chart class="chart" :option="pieChartOption" autoresize />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import {
  User,
  ShoppingCart,
  Document,
  Money,
  ArrowUp,
  ArrowDown
} from '@element-plus/icons-vue'

// 注册必要的组件
use([
  CanvasRenderer,
  LineChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
])

const timeRange = ref('week')

const cards = [
  {
    title: '总用户数',
    value: '1,128',
    icon: 'User',
    trend: 15,
    type: 'primary'
  },
  {
    title: '订单总数',
    value: '93',
    icon: 'ShoppingCart',
    trend: -8,
    type: 'success'
  },
  {
    title: '文章数量',
    value: '56',
    icon: 'Document',
    trend: 12,
    type: 'warning'
  },
  {
    title: '总收入',
    value: '￥15,233',
    icon: 'Money',
    trend: 32,
    type: 'danger'
  }
]

// 折线图配置
const lineChartOption = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '访问量',
      type: 'line',
      smooth: true,
      areaStyle: {
        opacity: 0.3
      },
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    },
    {
      name: '订单量',
      type: 'line',
      smooth: true,
      areaStyle: {
        opacity: 0.3
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    }
  ]
})

// 饼图配置
const pieChartOption = reactive({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '用户分布',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '华东地区' },
        { value: 735, name: '华北地区' },
        { value: 580, name: '华南地区' },
        { value: 484, name: '西北地区' },
        { value: 300, name: '西南地区' }
      ]
    }
  ]
})

// 处理时间范围变化
const handleTimeRangeChange = (value) => {
  // 这里可以根据不同的时间范围更新图表数据
  if (value === 'week') {
    lineChartOption.xAxis.data = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  } else if (value === 'month') {
    lineChartOption.xAxis.data = Array.from({length: 30}, (_, i) => `${i + 1}日`)
  } else {
    lineChartOption.xAxis.data = Array.from({length: 12}, (_, i) => `${i + 1}月`)
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  .data-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s;
    cursor: pointer;
    margin-bottom: 20px;

    &:hover {
      transform: translateY(-5px);
    }

    &.primary .card-icon {
      background: rgba(64, 158, 255, 0.1);
      color: #409eff;
    }

    &.success .card-icon {
      background: rgba(103, 194, 58, 0.1);
      color: #67c23a;
    }

    &.warning .card-icon {
      background: rgba(230, 162, 60, 0.1);
      color: #e6a23c;
    }

    &.danger .card-icon {
      background: rgba(245, 108, 108, 0.1);
      color: #f56c6c;
    }
  }

  .card-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }

  .card-info {
    flex: 1;
  }

  .card-title {
    font-size: 14px;
    color: #909399;
    margin-bottom: 8px;
  }

  .card-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 8px;
  }

  .card-trend {
    font-size: 12px;
    color: #909399;

    .up {
      color: #67c23a;
    }

    .down {
      color: #f56c6c;
    }
  }
}

.chart-row {
  margin-top: 20px;
}

.chart-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .chart {
    height: 350px;
  }
}
</style> 